{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from 'macros-protocol.html' import card, callout %}

{% extends "firefox/base/base-protocol.html" %}

{% macro feature_item(
  link,
  title,
  ga_title,
  desc
) -%}
<li class="c-feature-item">
  <a href="{{ link }}" data-link-text="{{ ga_title }}">
    <h3 class="c-feature-item-title">{{ title }}</h3>
    <p>{{ desc }}</p>
    <p class="c-feature-item-cta">{{ ftl('ui-learn-more') }}</p>
  </a>
</li>
{%- endmacro %}

{% block page_css %}
  {{ css_bundle('firefox-features-index')}}
{% endblock page_css %}

{% block page_title %}{{ ftl('features-index-firefox-browser-features') }}{% endblock page_title %}
{% block page_desc %}{{ ftl('features-index-firefox-is-the-fast-lightweight') }}{% endblock page_desc %}

{% block body_class %}features-index{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
{{ callout (
  title=self.page_title(),
  desc=self.page_desc(),
  class='c-feature-header mzp-t-content-md'
)}}

<div class="mzp-l-content">
  <div class="mzp-l-card-half">
    {{ card (
      title=ftl('features-index-firefox-keeps-getting-faster'),
      ga_title="Firefox keeps getting faster",
      aspect_ratio="mzp-has-aspect-16-9",
      desc=ftl('features-index-the-latest-browser-speed-benchmarks'),
      image=resp_img(
        url="img/firefox/features/fast.png",
        srcset={
          "img/firefox/features/fast-high-res.png": "2x"
        },
        optional_attributes={
          "loading": "lazy",
          "class": "mzp-c-card-image"
        }
      ),
      link_url=url('firefox.features.fast')
    )}}

    {{ card (
      title=ftl('features-index-is-firefox-a-private-browser'),
      ga_title="Is Firefox a private browser?",
      aspect_ratio="mzp-has-aspect-16-9",
      desc=ftl('features-index-were-focused-on-your-right-to'),
      image=resp_img(
        url="img/firefox/features/private.png",
        srcset={
          "img/firefox/features/private-high-res.png": "2x"
        },
        optional_attributes={
          "loading": "lazy",
          "class": "mzp-c-card-image"
        }
      ),
      link_url=url('firefox.features.private')
    )}}
  </div>

  <ul class="mzp-l-columns mzp-t-columns-three">
    {{ feature_item(
        link=url('firefox.features.password-manager'),
        title=ftl('features-index-free-password-manager'),
        ga_title="Free password manager",
        desc=ftl('features-index-get-help-creating-new-passwords'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.sync'),
      title=ftl('features-index-firefox-browser-sync'),
      ga_title="Firefox browser sync",
      desc=ftl('features-index-access-your-firefox-bookmarks'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.bookmarks'),
      title=ftl('features-index-bookmark-manager'),
      ga_title="Bookmark manager",
      desc=ftl('features-index-organize-your-bookmarks-with'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.private-browsing'),
      title=ftl('features-index-private-browsing-mode'),
      ga_title="Private browsing mode",
      desc=ftl('features-index-automatically-delete-cookies'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.customize'),
      title=ftl('features-index-customize-your-firefox-browser'),
      ga_title="Customize your Firefox browser",
      desc=ftl('features-index-choose-how-your-browser-looks'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.add-ons'),
      title=ftl('features-index-firefox-add-ons-and-browser-extensions'),
      ga_title="Firefox add-ons and browser extensions",
      desc=ftl('features-index-add-new-tools-capabilities-and'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.pinned-tabs'),
      title=ftl('features-index-pinned-browser-tabs'),
      ga_title="Pinned browser tabs",
      desc=ftl('features-index-keep-your-favorite-pages-open'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.eyedropper'),
      title=ftl('features-index-eyedropper-tool'),
      ga_title="Eyedropper tool",
      desc=ftl('features-index-identify-the-exact-color-on-a'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.pdf-editor'),
      title=ftl('features-index-pdf-editor'),
      ga_title="PDF editor",
      desc=ftl('features-index-view-and-edit-pdf-files'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.fingerprinting'),
      title=ftl('features-index-fingerprint-blocking'),
      ga_title="Fingerprint blocking",
      desc=ftl('features-index-ditch-the-sticky-ads'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.adblocker'),
      title=ftl('features-index-ad-tracker-blocking'),
      ga_title="Ad tracker blocking",
      desc=ftl('features-index-firefox-automatically-blocks'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.translate'),
      title=ftl('features-index-translate-the-web'),
      ga_title="Translate the Web",
      desc=ftl('features-index-translate-websites-to-your'),
    ) }}

    {{ feature_item(
      link=url('firefox.features.picture-in-picture'),
      title=ftl('features-index-picture-in-picture'),
      ga_title="Picture-in-Picture",
      desc=ftl('features-index-got-things-to-do'),
    ) }}
  </ul>

</div>
{% endblock content %}
